// nav导航标签设置
let x=localStorage.getItem("name")
let aitem=document.querySelector("#Name");
aitem.innerHTML=x;
// id
let url=decodeURI(window.location.href);
console.log(url);
var cs=url.split("?")[1].split("=");
console.log(cs);
var csKey=cs[0].toLowerCase()
var csvalue=+cs[1];
let o ={[csKey]:csvalue};
console.log(o);

let pageid = 1;
const xhr1=new XMLHttpRequest();
xhr1.open("get","http://chst.vip:1234/api/getcategorybyid?categoryid="+csvalue,false)
xhr1.onload=function(){
var lis='';
if(xhr1.status===200){
let res1=JSON.parse(xhr1.responseText)
console.log(res1.result[0]);
}}
xhr1.send();

 // 默认请求 第一页 数据  以及 确定 总页数
let list=document.querySelector("#list");
let selec=document.querySelector("#change");
let xhr2=new XMLHttpRequest();
  xhr2.open("get",'http://chst.vip:1234/api/getproductlist?categoryid='+csvalue+"&pageid="+pageid,false)
  xhr2.onload=function(){
    if(xhr2.status===200){
    let res2=JSON.parse(xhr2.responseText)
    // console.log(xhr2.responseText);
    
    let products = '';

    res2.result.forEach(some => {
    
      products+=`
                  <li>
                 
                    <div class="box" id=${some.productId}>
                        <div class="left">
                            ${some.productImg}
                        </div>
                        <div class="right">
                            <div class="top">
                              <h4>${some.productName}</h4>
                              <div class="price">${some.productPrice}</div>
                            </div>
                            <div class="bot">
                              <span class="sp1">${some.productQuote}</span>
                              <span class="sp2"><i class="iconfont icon-xiaoxixinxihuihuahuida"></i>${some.productCom}</span>
                            </div>
                        </div>
                    </div>
                
                </li>
      `
    });
    list.innerHTML=products;

    var options = "";
    let pageZ =  Math.floor(res2.totalCount /res2.pagesize );
    console.log(pageZ);
    for(var i=1;i<=pageZ;i++){
        options += `<option value="${i}" id="option">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${i}/${pageZ}</option>`
    }
    selec.innerHTML = options;

    list.pageZ=pageZ;
  }}
  xhr2.send();
  // 封装函数
  function ajax(url,id){
    let xhr3=new XMLHttpRequest();
      xhr3.open("get",'http://chst.vip:1234/api/getproductlist?categoryid='+url+"&"+"pageid"+"="+id,false)
      xhr3.onload=function(){
        if(xhr3.status===200){
        let res3=JSON.parse(xhr3.responseText)
        console.log(res3);
        
        let products = '';

        res3.result.forEach(some => {
          products+=`
                      <li>

                        <div class="box" id=${some.productId}>
                            <div class="left">
                                ${some.productImg}
                            </div>
                            <div class="right">
                                <div class="top">
                                  <h4>${some.productName}</h4>
                                  <div class="price">${some.productPrice}</div>
                                </div>
                                <div class="bot">
                                  <span class="sp1">${some.productQuote}</span>
                                  <span class="sp2"><i class="iconfont icon-xiaoxixinxihuihuahuida"></i>${some.productCom}</span>
                                </div>
                            </div>
                        </div>
                 
                    </li>
          `
        });
        list.innerHTML=products;
      }}
      xhr3.send();
  }

  // 下一页
  var next=document.querySelector("#after");

  next.onclick=function(){
      pageid++;
      if(pageid> list.pageZ){
        pageid = list.pageZ;
    }
    ajax(csvalue,pageid);
    
      let optionall = document.querySelectorAll("option");  
      optionall[pageid-1].selected = true;    
 }
//  上一页
var before=document.querySelector("#before");
before.onclick=function(){
    pageid--;
    if(pageid===0){
      pageid=1;
    }
    ajax(csvalue,pageid);
    let optionall = document.querySelectorAll("option");  
    optionall[pageid-1].selected = true; 
}

// select 选择事件
let change=document.querySelector("#change");
change.onclick=function(e){
  var e = e || window.event;
  var target = e.target || e.srcElement;

  pageid = target.value;
  ajax(csvalue,pageid);

  let optionall = document.querySelectorAll("option");  
  optionall[pageid-1].selected = true; 

}

// 点击跳转详情页面事件
$(".box").click(function(e){
  var e=e ||window.event;
  var target=e.target ||e.srcElement;
  if(target.nodeName==="DIV"){
    proId=target.id;
  }else if(target.nodeName==="H4"){
    proId=target.parentNode.parentNode.parentNode.id
  }else{
    proId=target.parentNode.parentNode.id || target.parentNode.id;
  }
  console.log(proId);
  location.href="../html/product.html?productid="+proId
})








 

   


